<template>
  <div class="role-auditor-select-wrap">
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearch"
      :trigger-on-focus="false"
      :popper-append-to-body="false"
      popper-class="my-autocomplete"
      placeholder="搜索姓名"
      @select="handleSelect">
      <i
        slot="prefix"
        class="el-icon-search el-input__icon"
      />
      <template slot-scope="{ item }">
        <div class="user-info-box" style="height: 66px; width: 230px;">
          <el-avatar :size="40" :src="item.avatar" @error="errorHandler">
            <img :src="adminIcon">
          </el-avatar>
          <div class="user-info">
            <span class="name">{{ item.userName }}</span>
            <span class="post">{{ item.post }}</span>
            <span class="dept">{{ item.dept }}</span>
          </div>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>
<script>
import adminIcon from '@/assets/user-avatar.png';
export default {
  name: 'RoleAuditorSelect',
  props: {
    userList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      restaurants: [],
      state: '',
      adminIcon
    };
  },
  methods: {
    errorHandler() {
      return true;
    },
    handleSelect(val) {
      const { userId, userName, avatar, post } = val;
      const param = {
        id: userId,
        userName,
        avatar,
        post
      };
      this.$emit('select', param);
    },
    querySearch(queryString, cb) {
      var restaurants = this.userList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.userName.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.role-auditor-select-wrap {
  margin-bottom: 10px;
  & ::v-deep {
    .my-autocomplete {
      position: absolute !important;
      width: 250px !important;
      // min-width: 293px !important;
    }
    .el-autocomplete-suggestion__wrap {
      padding: 0 !important;
    }
    .el-autocomplete-suggestion li {
      padding: 0 12px;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      background-color: #F5F5F5;
      border: none;
      padding: 0 8px 0 26px;
      font-size: 12px;
      width: 250px;
      &::-webkit-input-placeholder {
        color: #999;
      }
    }
    .el-input__prefix {
      color: #6b6b6b;
      font-size: 14px;
    }
  }
}
.user-info-box {
  display: flex;
  padding-top: 12px;
  .user-info {
    display: flex;
    flex: 1;
    height: 54px;
    flex-direction: column;
    margin-left: 8px;
    border-bottom: 1px solid #EBEEFD;
    .name {
      display: inline-block;
      max-width: 150px;
      color: #333333;
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 4px;
      line-height: 1;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap;
    }
    .post {
      display: inline-block;
      max-width: 150px;
      color: #666;
      font-size: 12px;
      line-height: 1;
      margin-bottom: 4px;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap;
    }
    .dept {
      display: inline-block;
      max-width: 150px;
      color: #999;
      font-size: 12px;
      line-height: 1;
      overflow:hidden; //超出的文本隐藏
      text-overflow:ellipsis; //溢出用省略号显示
      white-space:nowrap;
    }
  }
}
</style>
